﻿<template>
  <s-layout title="推荐详情" navbar="normal" :navbarStyle="{ color: '#333' }">
    <view class="detail-container">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-else-if="error" class="error-container">
        <text class="error-text">{{ error }}</text>
        <view class="retry-btn" @tap="loadDetail">
          <text>重试</text>
        </view>
      </view>
      
      <view v-else-if="!detail" class="empty-container">
        <text class="empty-text">内容不存在</text>
      </view>
      
      <view v-else class="detail-content">
        <view class="hero-section">
          <image 
            v-if="detail.image" 
            :src="detail.image" 
            mode="aspectFill"
            class="hero-image"
          />
          <view v-else class="hero-placeholder">
            <text class="placeholder-emoji">🏞️</text>
          </view>
        </view>
        
        <view class="content-section">
          <view class="title-section">
            <view class="title-header ss-flex ss-row-between ss-col-center">
              <view class="title-content">
                <text class="main-title">{{ detail.title }}</text>
                <text class="create-time" v-if="detail.createTime">{{ formatTime(detail.createTime) }}</text>
              </view>
              <view class="follow-btn" :class="{ followed: detail.followed === 1 }" @tap="toggleFollow">
                <text class="follow-icon">{{ detail.followed === 1 ? '❤️' : '🤍' }}</text>
                <text class="follow-text">{{ detail.followed === 1 ? '已关注' : '关注' }}</text>
              </view>
            </view>
          </view>
          
          <view class="synopsis-section" v-if="detail.synopsis">
            <text class="synopsis-text">{{ detail.synopsis }}</text>
          </view>
          
          <view class="rich-content" v-if="detail.content">
            <mp-html :content="detail.content" />
          </view>
          
          <view class="meta-info">
            <view class="meta-item" v-if="detail.reviewer">
              <text class="meta-label">审核人:</text>
              <text class="meta-value">{{ detail.reviewer }}</text>
            </view>
            <view class="meta-item" v-if="detail.reviewTime">
              <text class="meta-label">审核时间:</text>
              <text class="meta-value">{{ formatTime(detail.reviewTime) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import sheep from '@/sheep';

const loading = ref(false);
const error = ref('');
const detail = ref(null);

const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

const loadDetail = async () => {
  try {
    loading.value = true;
    error.value = '';
    
    const res = await sheep.$api.noAuth.getHomeDetail('2', props.id);
    
    if (res) {
      detail.value = {
        ...res,
        image: getFirstValidImage(res.pics)
      };
    } else {
      detail.value = null;
    }
  } catch (err) {
    error.value = '加载失败，请稍后重试';
    detail.value = null;
  } finally {
    loading.value = false;
  }
};

const getFirstValidImage = (pics) => {
  if (!pics || pics === 'null' || pics === '') return null;
  const picArray = pics.split(',').filter(pic => pic && pic !== 'null' && pic.trim() !== '');
  return picArray.length > 0 ? picArray[0].trim() : null;
};

const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN');
};

const toggleFollow = async () => {
  if (!detail.value?.id) return;
  
  try {
    if (detail.value.followed === 1) {
      // 取消关注
      await sheep.$api.noAuth.unfollowContent({
        type: 2,
        dataId: detail.value.id
      });
    } else {
      // 关注
      await sheep.$api.noAuth.followContent({
        type: 2,
        dataId: detail.value.id
      });
    }
    // 切换关注状态
    detail.value.followed = detail.value.followed === 1 ? 0 : 1;
  } catch (error) {
    sheep.$helper.toast('操作失败，请稍后重试');
  }
};

onMounted(() => {
  loadDetail();
});
</script>

<style lang="scss" scoped>
$primary-color: #8B4513;
$secondary-color: #DAA520;
$text-dark: #333;
$text-light: #666;

.detail-container {
  min-height: 100vh;
  background: #f8f9fa;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  
  .loading-text,
  .error-text,
  .empty-text {
    font-size: 28rpx;
    color: $text-light;
    margin-bottom: 20rpx;
  }
  
  .retry-btn {
    padding: 16rpx 32rpx;
    background: $primary-color;
    color: white;
    border-radius: 24rpx;
    font-size: 26rpx;
  }
}

.detail-content {
  .hero-section {
    width: 100%;
    height: 500rpx;
    
    .hero-image {
      width: 100%;
      height: 100%;
    }
    
    .hero-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      
      .placeholder-emoji {
        font-size: 80rpx;
      }
    }
  }
  
  .content-section {
    background: white;
    padding: 40rpx;
    
    .title-section {
      margin-bottom: 30rpx;
      
      .title-header {
        .title-content {
          flex: 1;
          
          .main-title {
            display: block;
            font-size: 40rpx;
            font-weight: bold;
            color: $text-dark;
            line-height: 1.4;
            margin-bottom: 15rpx;
          }
          
          .create-time {
            font-size: 24rpx;
            color: $text-light;
          }
        }
        
        .follow-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 16rpx 24rpx;
          border-radius: 40rpx;
          border: 2rpx solid #e0e0e0;
          background: white;
          transition: all 0.3s ease;
          
          .follow-icon {
            font-size: 32rpx;
            margin-bottom: 4rpx;
          }
          
          .follow-text {
            font-size: 22rpx;
            color: $text-light;
          }
          
          &.followed {
            border-color: #ff4d4f;
            background: #fff2f2;
            
            .follow-text {
              color: #ff4d4f;
            }
          }
          
          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
    
    .synopsis-section {
      margin-bottom: 30rpx;
      padding: 30rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      border-left: 8rpx solid $primary-color;
      
      .synopsis-text {
        font-size: 28rpx;
        line-height: 1.6;
        color: $text-dark;
      }
    }
    
    .rich-content {
      margin-bottom: 40rpx;
      
      :deep(.mp-html) {
        font-size: 28rpx;
        line-height: 1.8;
        color: $text-dark;
        
        img {
          max-width: 100%;
          border-radius: 12rpx;
          margin: 20rpx 0;
        }
        
        p {
          margin: 20rpx 0;
        }
      }
    }
    
    .meta-info {
      border-top: 2rpx solid #f0f0f0;
      padding-top: 30rpx;
      
      .meta-item {
        display: flex;
        margin-bottom: 15rpx;
        
        .meta-label {
          font-size: 24rpx;
          color: $text-light;
          width: 150rpx;
        }
        
        .meta-value {
          font-size: 24rpx;
          color: $text-dark;
          flex: 1;
        }
      }
    }
  }
}
</style> 
